<template>
	<view class="page-bg">
		<u-navbar :border="false" :placeholder="true">
			<view slot="left" class="f f14">
				<image src="../../static/order/location-order.png"
					style="width: 20px; height: 20px; margin-right: 3px;"></image>
				<span
					style=" white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width: 100px;">{{address}}</span>
			</view>
			<view slot="center" class="fb c3 f16">
				首页
			</view>
		</u-navbar>
		<view class="container" >
			<view class="notice-layout-bg mt10 pb10">
				<view class="top-left-bg f-f-c-c">通知</view>
				<view class="f-f-c-c p10">
					<view class="f16 c6">
						{{sysNotice.noticeTitle}}
					</view>
				</view>
				<view class="f-s-b mt10 pl10 pr10" v-if="sysNotice.noticeType==3">
					<view class="f1 cancel-btn"> 取消(3s)</view>
					<view class="f1 sure-btn ml20" @click="navToView('/pagesA/order/order-details')"> 抢单</view>
				</view>
			</view>
			<view class="fb c3 mt10 f16">订单统计</view>
			<view class="f-c mt10 f14 fb cf">
				<view class="status-bg f1 f-f-c-c " style="background: #E88949;" @click="navToSwitch('2')">
					<view>待完成</view>
					<view>{{hsRiderStatistics.incompleteOrderNum}}</view>
				</view>
				<view class="status-bg f1 f-f-c-c  ml10" style="background: #E88949;" @click="navToSwitch('4')">
					<view>已完成</view>
					<view>{{hsRiderStatistics.completeOrderNum}}</view>
				</view>
				<view class="status-bg f1 f-f-c-c ml10" style="background: #E88949;" @click="navToSwitch('5')">
					<view>失败</view>
					<view>{{hsRiderStatistics.failOrderNum}}</view>
				</view>
			</view>
			<view class="f-c mt10 f14 fb cf">
				<view class="status-bg f1 f-f-c-c " style="background-color: #62B184;" @click="navToSwitch('2')">
					<view>昨日待完成</view>
					<view>{{hsRiderStatistics.yesterdayIncompleteOrderNum}}</view>
				</view>
				<view class="status-bg f1 f-f-c-c  ml10" style="background-color: #62B184;" @click="navToSwitch('2')">
					<view>今日待完成</view>
					<view>{{hsRiderStatistics.todayIncompleteOrderNum}}</view>
				</view>
			</view>
			<view class="status-bg f-c mt10 f14 fb cf" style="background: #6184F8;">
				<view class=" f1 f-f-c-c  " @click="navToSwitch('1')">
					<view>待接单</view>
					<view>{{hsRiderStatistics.noTakeOrderNum}}</view>
				</view>
				<view style="width: 1px; height: 25px; background: #fff;" />
				<view class=" f1 f-f-c-c  " @click="navToSwitch('2')">
					<view>待服务</view>
					<view>{{hsRiderStatistics.waitServiceOrderNum}}</view>
				</view>
				<view style="width: 1px; height: 25px; background: #fff;" />
				<view class=" f1 f-f-c-c  " @click="navToSwitch('3')">
					<view>服务中</view>
					<view>{{hsRiderStatistics.inServiceOrderNum}}</view>
				</view>
			</view>

			<view class="order-item mt10 p10" v-for="item,index in appointmentOrderVoList" :key="index">
				<view class="f-s-b">
					<view class="c6 f16" v-show="item.status==2">({{item.endTime}})前到达</view>
					<view class="c6 f16" v-show="item.status==4">({{item.arriveTime}})到达</view>
					<view class="cm">已接单</view>
				</view>
				<view class="divider-line mt10 mb10" />
				<view class="f">
					<view style="flex: 1;">
						<view>
							<view class="c3 f16 fb">
								{{item.province}}{{item.city}}{{item.county}}
							</view>
							<view class="c6 f14">
								{{item.address}}
							</view>
						</view>

						<view class="mt10">
							<view class="cm f16 ">
								预估总重量: {{item.expectWeightTal}}kg
							</view>
							<view class="cm f16 fb">
								预估总金额: ¥{{item.expectAmountTal}}
							</view>
						</view>
					</view>
					<view>
						<view class="c3 f16 fb">
							{{item.contactor}}
						</view>
						<view class="navigation-bg f-c cm mt20" @click="goMap1(item)">
							<image src="../../static/home/navigation.svg" style="width: 20px; height: 20px;"></image>
							<view>导航</view>
						</view>
					</view>
				</view>
				<view class="divider-line mt10" />
				<view class="f m10 pb10">
					<view class="f-f-c-c ml10" @click="callPhoneShow(item)">
						<image src="../../static/home/phone.svg" style="width: 20px; height: 20px;"></image>
						<view class="f16 c6">联系</view>
					</view>
					<view v-show="item.status==2" class="sure-btn f1 ml20" style="height: 50px;"
						@click="arrivedShow(item)">
						我已到达
					</view>
					<view v-show="item.status==4" class="sure-btn f1 ml20" style="height: 50px;"
						@click="navToView('/pagesA/settlement-order/settlement-order?orderId='+item.id)">
						订单结算
					</view>
				</view>
			</view>
			<view class="f-f-c-c" v-show="appointmentOrderVoList.length==0">
				<image src="../../static/no-data.svg"></image>
				<view>暂无记录</view>
			</view>
			
		<view  class="notice" style="" v-if="shownotice" >
			<view  class="notice_content"  @tap.stop="requestSubscribeMessage" style=" height: 50px;display:flex;justify-content: center;flex-flow: row;align-items: center;justify-items: center;">
				 <view style=" flex:3;display:flex;justify-content: center;flex-flow: column;">
					 <text>	是否订阅回收下单通知?</text>	
				 	 <text style=" flex:1;font-size:10px;">一次订阅消息提醒，多次订阅多次提醒</text>	
				 </view>
				 <view style=" width:80px;font-size:10px;">
					 <button style="color: #FFFFFF;font-size: 14px;line-height: 24px;background: #1AC388;">订阅</button>
					 
					 <text style="color: #000000;font-size: 12px;line-height: 24px" @tap.stop="setnonotice">&nbsp;&nbsp;不再订阅</text>
					 
				</view>	
				 
		   </view>
		</view>

		</view>

		<u-popup :round="10" :show="showPhone" mode="center" @close="close">
			<view class="phone-bg">
				<view class="fb c3 f18 f-f-c-c mt20">
					{{phone}}
				</view>
				<view class="f-s-b mt20">
					<view class="c3" @click="showPhone=false">
						取消
					</view>
					<view class="cm" @click="callPhone()">
						拨号
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :round="10" :show="showArrived" mode="center" @close="close">
			<view class="phone-bg">
				<view class="fb c3 f18 f-f-c-c mt20">
					是否确认到达?
				</view>
				<view class="f-s-b mt20">
					<view class="c3" @click="showArrived=false">
						取消
					</view>
					<view class="cm" @click="handlerOrder()">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	var QQMapWX = require('../../common/qqmap-wx-jssdk.min.js');


	export default {
		onShareAppMessage() {
		  return {
		    title: '清能回收员',
		    path: '/pages/home/home',
		    imageUrl: '/static/logo.png'
		  }
		},
		onShareTimeline: function() {
			  return {
				title: "清能回收员",
				imageUrl: '/static/logo.png',
				path: `/pages/home/home` 
			}
		},

		data() {
			return {
				shownotice:true,
				addressName: '',
				showPhone: false,
				showArrived: false,
				longitude: 118.4435156,
				latitude: 32.1923716,
				currentOrder: null,
				address: '定位中...',
				sysNotice: {},
				hsRiderStatistics: {},
				appointmentOrderVoList: [],
				phone: '',
			}
		},
		onShow() {
			this.homestatistics()
			
			let  t =   uni.getStorageSync('shownotice');
			this.shownotice = (t===false)?false:true;
	
		},
		onLoad() {
			
			// wx.getSetting({
			//   withSubscriptions: true,
			//   success (res) {
			//     console.log("authSetting",res.authSetting)
			//     // res.authSetting = {
			//     //   "scope.userInfo": true,
			//     //   "scope.userLocation": true
			//     // }
			//     console.log(res.subscriptionsSetting)
			//     // res.subscriptionsSetting = {
			//     //   mainSwitch: true, // 订阅消息总开关
			//     //   itemSettings: {   // 每一项开关
			//     //     SYS_MSG_TYPE_INTERACTIVE: 'accept', // 小游戏系统订阅消息
			//     //     SYS_MSG_TYPE_RANK: 'accept'
			//     //     zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'reject', // 普通一次性订阅消息
			//     //     ke_OZC_66gZxALLcsuI7ilCJSP2OJ2vWo2ooUPpkWrw: 'ban',
			//     //   }
			//     // }
			//   }
			// })
			
			// 实例化API核心类
			var qqmapsdk = new QQMapWX({
				key: 'SHPBZ-EA7WA-3PDK2-C2XQQ-DZXM7-3YBBO' // 必填
			});
			let that = this
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: function(res) {
					that.latitude = res.latitude
					that.longitude = res.longitude
					if (res.address) {
						that.address = res.address.city + res.address.district + res.address.street + res
							.address.streetNum
					}
					// #ifdef MP-WEIXIN
					//逆地址解析  坐标转地址信息
					qqmapsdk.reverseGeocoder({
						//Object格式
						location: {
							latitude: that.latitude,
							longitude: that.longitude
						},
						success: function(res) { //成功后的回调
							console.log(res)
							that.address = res.result.address
							// const mapdata = res.result.ad_info;
							// that.city = mapdata.city;
						},
						fail: function(error) {
							console.error(error);
						},
						complete: function(res) {
							//console.log(res);
						}
					});
					// #endif
				}
			})
			setInterval(function() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log(res, '  经纬度')
						let params = {
							riderId: uni.getStorageSync("usemall_userInfo").id,
							latitude: res.latitude,
							longitude: res.longitude
						}
						that.request("post", "rider/app/updateAddress", uni.getStorageSync('token'),
							params).then(
							res => {})
					}
				})
			}, 10000);


		},

		methods: {
			...mapMutations(['saveUserInfo', 'sessionToken']),
			
			setnonotice(){
				uni.setStorageSync('shownotice', false)
				this.shownotice = false
			},
			callPhoneShow(item) {
				console.log(item, ' item')
				this.phone = item.phone
				this.showPhone = true
			},
			arrivedShow(item) {
				this.currentOrder = item
				this.showArrived = true
			},
			//在用户必点的地方，调用订阅消息方法
			clickSubscribeMessage(){
			   // let flag = wx.getStorageSync('checkFlag');
			   // console.log(false);
			   // //订阅消息
			   // if(flag){
			   
			   // }
			   
			   requestSubscribeMessage();
			   
			 },
	
		
			requestSubscribeMessage() {
				uni.requestSubscribeMessage({
					tmplIds: ['mj9K3MWnVS0OKgdjHxgtB4gnB5jbmZjWvLCpij7F7Tg'], // 替换为你的模板ID
					success(res) {
						if (res['mj9K3MWnVS0OKgdjHxgtB4gnB5jbmZjWvLCpij7F7Tg'] === 'accept') {
							console.log('用户同意订阅');
							// 用户同意订阅后的处理逻辑
							// wx.getSetting({
							//   withSubscriptions: true,
							//   success (res) {
							//     console.log(res.subscriptionsSetting)
							//     if(JSON.stringify(res.subscriptionsSetting).indexOf(workTaskTemplateId) != -1){
							//       console.log("用户选择了“保持以上选择”")
							//       that.checkFlag();
							//     }
							//   }
							// })
							
						} else {
							console.log('用户拒绝订阅');
							// 用户拒绝订阅后的处理逻辑
						}
					},
					fail(err) {
						console.error('订阅消息授权失败', err);
					}
				});
			},
			goMap1(item) { //
				uni.openLocation({
					latitude: Number(item.latitude), //维度
					longitude: Number(item.longitude), //经度
					scale: 18, //缩放比例，范围5~18，默认为18
					name: item.province + item.city + item.county, //地址名称
					address: item.address, //地址详情
				})
			},
			close() {
				this.showPhone = false
				this.showArrived = false
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			},
			navToView(url) {
				uni.navigateTo({
					url: url
				})
			},
			navToSwitch(value) {
				uni.setStorageSync('currentPage', value)
				let currentPage = uni.getStorageSync("currentPage")
				uni.switchTab({
					url: '/pages/order/order'
				})
			},
			handlerOrder() {
				this.showArrived = false
				let params = {
					id: this.currentOrder.id,
					status: '4'
				}
				uni.showLoading({

				})
				let that = this
				that.request("get", "riderAppOrder/app/dealOrder", uni.getStorageSync('token'), params).then(
					res => {
						if (res.code === 200) {
							that.homestatistics();
							uni.showToast({
								title: res.msg,
								icon: 'success',
								mask: true
							})
						}
						uni.hideLoading()
					})
			},
			homestatistics() {
				let params = {}
				let that = this
				that.request("get", "home/riderApp/statistics", uni.getStorageSync('token'), params).then(res => {
					if (res.code === 200) {
						that.sysNotice = res.data.sysNotice
						that.hsRiderStatistics = res.data.hsRiderStatistics
						that.appointmentOrderVoList = res.data.appointmentOrderVoList

					}
				})
			}


		}
	}
</script>

<style scoped lang="scss">
	.notice-layout-bg {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;

		.top-left-bg {
			width: 40px;
			height: 24px;
			color: #FFFFFF;
			font-size: 14px;
			line-height: 24px;
			background: #1AC388;
			border-radius: 4px 0px 4px 0px;
			opacity: 1;
		}
	}

	.status-bg {
		height: 58px;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}

	.order-item {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}

	.current-status-icon {
		width: 10px;
		height: 10px;
		background-color: #1AC388;
		border-radius: 10px;
	}

	.status-icon {
		width: 10px;
		height: 10px;
		background-color: #999999;
		border-radius: 10px;
	}

	.navigation-bg {
		width: 65px;
		height: 26px;
		background: rgba(26, 195, 136, 0);
		border-radius: 13px 13px 13px 13px;
		opacity: 1;
		border: 1px solid #1AC388;
	}

	.phone-bg {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		width: calc(100vw - 80px);
		margin: 0 auto;
		padding: 20px;
	}
</style>